<template>
  <div class="online-train-wrapper">
    <div class="w-content">
      <div class="online-train-title w-100 d-flex flex-jc-c">
        <img :src="titleLeft">
        <div class="label fs-30 fw-700">{{ categoryTitle }}</div>
        <img :src="titleRight">
      </div>
      <div class="online-train-content d-flex flex-jc-sb fs-18">
        <div class="prex" @click="prex" />
        <div class="next" @click="next" />
        <div v-for="(data, index) in dataList" :key="'data' + index" class="train-item" @click="toNewsDetail(data.id)">
          <img :src="imgUrl + data.titleImageId">
          <div class="label">{{ data.title }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { articleList } from '@/api/rest/portal/portal'
export default {
  name: 'IndexOnlineTraining',
  data() {
    return {
      categoryTitle: '服务培训',
      titleLeft: require('@/assets/portal_images/title_left.png'),
      titleRight: require('@/assets/portal_images/title_right.png'),
      imgUrl: process.env.VUE_APP_BASE_API + '/api/portal/viewImage/',
      listQuery: {
        categoryCodes: 'ONLINE',
        page: 1,
        limit: 3
      },
      categoryIndex: 0,
      dataList: []
    }
  },
  created() {
    this.getArticleList()
  },
  methods: {
    toNewsDetail(id) {
      this.$router.push({ path: '/newsDetail', query: { id, currentIndex: this.categoryIndex, categoryTitle: this.categoryTitle }})
    },
    getArticleList() {
      if (this.listQuery.page > 0) {
        articleList(this.listQuery).then(res => {
          if (res.data.items.length > 0) {
            if (res.data.items.length < 3) {
              this.dataList = this.dataList.slice(res.data.items.length, 3).concat(res.data.items)
            } else {
              this.dataList = res.data.items
            }
            this.total = res.data.total
          }
        })
      }
    },
    prex() {
      if (this.listQuery.page > 1) {
        this.listQuery.page--
        this.getArticleList()
      }
    },
    next() {
      if (this.listQuery.page * this.listQuery.limit >= this.total) return
      this.listQuery.page++
      this.getArticleList()
    }
  }
}
</script>

<style lang="scss" scoped>
@import '~@/styles/variables.scss';
.online-train-wrapper {
  height: 508px;
  background-image: url('~@/assets/portal_images/online_train_bg.png');
  background-size: 100% 100%;
  padding: 63px 0 65px 0;
  .online-train-title {
    height: 40px;
    .label {
      margin: 0 32px;
    }
    img {
      width: 40px;
      height: 40px;
    }
  }
  .online-train-content {
    margin-top: 56px;
    height: 284px;
    position: relative;
    .train-item {
      width: 384px;
      padding: 18px;
      background-color: $portalWhiteColor;
      border-radius: 8px;
      cursor: pointer;
      img {
        width: 348px;
        height: 210px;
        border-radius: 6px;
      }
      .label {
        margin-top: 14px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        color: #222222;
        text-align: center;
      }
    }
    .prex {
      position: absolute;
      left: -33px;
      top:109px;
      width: 66px;
      height: 66px;
      background-image: url('~@/assets/portal_images/prex.png');
      cursor: pointer;
    }
    .next {
      position: absolute;
      right: -33px;
      top:109px;
      width: 66px;
      height: 66px;
      background-image: url('~@/assets/portal_images/next.png');
      cursor: pointer;
    }
  }
}
</style>
